<template>
  <div class="ad" v-show="show">
    <div style="display: flex;justify-content: space-between;">
      <span>广告</span>
      <button @click="show=false">{{ count }}跳过</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(false);
const count = ref(5)
const timer = setInterval(() => {
  count.value--;
  if(count.value <= 0) {
    show.value = false;
    clearInterval(timer)
  }
}, 1000)
</script>

<style lang="scss">
.ad {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  // background-color: red;
  background-image: url('../../assets/ad.avif');
  background-size: 100% 100%;
}
</style>

